<template>
    <div>
      <el-card style="margin-bottom: 60px">
        <div slot="header" class="clearfix">
          <div class="heder-left">
            <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
            <span style="margin-left: 10px">项目详情</span>
          </div>
        </div>
        <el-form
          :model="ruleForm"
          style="width: 100%; margin-bottom: 30px"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          inline
        >
          <div class="flex">
            <el-form-item label="项目名称" prop="project_name" style="width: 66%">
              <el-input v-model="ruleForm.project_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="项目进度" prop="project_progress_status" style="width: 33%">
              <el-select style="width: 100%" disabled v-model="ruleForm.project_progress_status" placeholder="请选择">
                <el-option
                  v-for="(item, index) in projectProgressList"
                  :key="index"
                  :label="item.para_name"
                  :value="item.id"
                  >{{ item.para_name }}</el-option
                >
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="所属区域"  prop="selectedArea" style="width: 33%">
              <el-cascader
              disabled
                ref="areaData"
                :options="areaData"
                style="width: 100%"
                v-model="ruleForm.selectedArea"
                placeholder="请选择省市区"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address" style="width: 66%">
              <el-input v-model="ruleForm.address" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="施工许可证号" prop="xkz" style="width: 33%">
              <el-input v-model="ruleForm.xkz" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="项目分类" prop="type_id" style="width: 33%">
              <el-select style="width: 100%" disabled v-model="ruleForm.type_id" placeholder="请选择">
                <el-option
                  v-for="(item, index) in projectTypeList"
                  :key="index"
                  :label="item.para_name"
                  :value="item.id"
                  >{{ item.para_name }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="项目联系人" prop="link_username" style="width: 33%">
              <el-input v-model="ruleForm.link_username" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="项目联系人电话" prop="link_mobile" style="width: 33%">
              <el-input v-model="ruleForm.link_mobile" disabled maxlength="11" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="开工日期" prop="start_time" style="width: 33%">
              <el-date-picker
                v-model="ruleForm.start_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
                disabled
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="竣工日期" prop="end_time" style="width: 33%">
              <el-date-picker
                v-model="ruleForm.end_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
                disabled
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="施工单位" prop="build_name" style="width: 33%">
              <el-input v-model="ruleForm.build_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="技术负责人" prop="build_username" style="width: 33%">
              <el-input v-model="ruleForm.build_username" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="技术负责人电话" prop="build_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.build_mobile"
                maxlength="11"
                style="width: 100%"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="建设单位" prop="construct_name" style="width: 33%">
              <el-input v-model="ruleForm.construct_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="建设单位负责人" prop="construct_username" style="width: 33%">
              <el-input v-model="ruleForm.construct_username" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="建设单位负责人电话" prop="construct_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.construct_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="监理单位" prop="supervisor_name" style="width: 33%">
              <el-input v-model="ruleForm.supervisor_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="总监理工程师" prop="supervisor_username" style="width: 33%">
              <el-input v-model="ruleForm.supervisor_username" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="总监理工程师电话" prop="supervisor_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.supervisor_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="勘查单位" prop="survey_name" style="width: 33%">
              <el-input v-model="ruleForm.survey_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="勘查单位负责人" prop="survey_username" style="width: 33%">
              <el-input
                v-model="ruleForm.survey_username"
                disabled
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="勘查单位负责人电话" prop="survey_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.survey_mobile"
                maxlength="11"
                style="width: 100%"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="设计单位" prop="design_name" style="width: 33%">
              <el-input v-model="ruleForm.design_name" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设计单位负责人" prop="design_username" style="width: 33%">
              <el-input v-model="ruleForm.design_username" disabled style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设计单位负责人电话" prop="design_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.design_mobile"
                maxlength="11"
                style="width: 100%"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="title">
            <span>项目地址</span>
          </div>
          <div class="flex">
            <span>经度：{{ ruleForm.lng }}</span>
            <span style="margin-left: 15px">纬度：{{ ruleForm.lat }}</span>
          </div>
          <div class="map">
            <el-amap :zoom="zoom" :center="center" class="amap-demo" @init="mapInit" >
              <el-amap-marker
                v-for="(marker, index) in markers"
                :key="index"
                :position="marker.position"
              ></el-amap-marker>
            </el-amap>
          </div>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { dateFormat } from '../../libs/util';
  import { regionData } from 'element-china-area-data';
  import { Parameterlist, ProjectSave,ProjectInfo } from '@/api/manage';
  export default {
    name: 'addCourseware',
    data() {
      return {
        zoom: 14,
        center: [116.397455, 39.909187],
        markers: [],
        searchContent: '',
        areaData: regionData,
        ruleForm: {
          project_name: '',
          project_progress_status: '',
          province_id: '',
          province_name: '',
          city_id: '',
          city_name: '',
          area_id: '',
          area_name: '',
          type_id: '',
          link_username: '',
          xkz: '',
          lxr: '',
          link_mobile: '',
          start_time: '',
          end_time: '',
          build_name: '',
          build_username: '',
          build_mobile: '',
          construct_name: '',
          construct_username: '',
          construct_mobile: '',
          supervisor_name: '',
          supervisor_username: '',
          supervisor_mobile: '',
          survey_name: '',
          survey_username: '',
          survey_mobile: '',
          design_name: '',
          design_username: '',
          design_mobile: '',
          lat: '',
          lng: '',
          selectedArea: [],
          address: '',
        },
        rules: {
          project_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
          project_progress_status: [{ required: true, message: '请选择项目进度', trigger: 'change' }],
          selectedArea: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
          type_id: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
          address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
          link_username: [{ required: true, message: '请输入项目联系人', trigger: 'blur' }],
          link_mobile: [{ required: true, message: '请输入项目联系人电话', trigger: 'blur' }],
          xkz: [{ required: true, message: '请输入施工许可证号', trigger: 'blur' }],
        },
        projectProgressList: [],
        projectTypeList: [],
        map: null,
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getParameter(1);
      this.getParameter(2);
      if(this.$route.query.id){
        this.ruleForm.id = this.$route.query.id;
        this.getInfo();
      }
      // this.initMap();
      
    },
    methods: {
      // 获取详情
      getInfo(){
        ProjectInfo({id:this.$route.query.id}).then(res=>{
          this.ruleForm = res.data.info;
          this.center  = [res.data.info.lng,res.data.info.lat]
          this.markers  = [
            {
              position: [res.data.info.lng, res.data.info.lat],
              icon: 'http://api.map.baidu.com/img/markers.png',
            },
          ];
          this.ruleForm.selectedArea = [String(this.ruleForm.province_id), String(this.ruleForm.city_id), String(this.ruleForm.area_id)]
            console.log(this.ruleForm.selectedArea)
        })
      },
      mapInit(o) {
        this.map = o;
      },
      mapClick(e) {
          this.ruleForm.lng = e.lnglat.lng;
          this.ruleForm.lat = e.lnglat.lat;
          this.markers = [
            {
              position: [e.lnglat.lng, e.lnglat.lat],
              icon: 'http://api.map.baidu.com/img/markers.png',
            },
          ];
      },
      selectPoi(e) {
        console.log('selectPoi: ', e);
        if (e.poi.location) {
          this.map.setCenter([e.poi.location.lng, e.poi.location.lat]);
          this.ruleForm.lng = e.poi.location.lng;
          this.ruleForm.lat = e.poi.location.lat;
          this.markers = [
            {
              position: [e.poi.location.lng, e.poi.location.lat],
              icon: 'http://api.map.baidu.com/img/markers.png',
            },
          ];
        }
      },
      choosePoi(e) {
        console.log('choosePoi: ', e);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(!this.ruleForm.lng || !this.ruleForm.lat){
              this.$message.error('请选择经纬度！');
              return false;
            }
            let area = this.$refs.areaData.getCheckedNodes()[0];
            this.ruleForm.province_id = area.path[0];
            this.ruleForm.province_name = area.pathLabels[0];
            this.ruleForm.city_id = area.path[1];
            this.ruleForm.city_name = area.pathLabels[1];
            this.ruleForm.area_id = area.path[2];
            this.ruleForm.area_name = area.pathLabels[2];
            ProjectSave(this.ruleForm).then((res) => {
              this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
              this.back();
            });
          } else {
            this.$message.error('请正确填写！');
            return false;
          }
        });
      },
      initMap() {
        // 初始化地图
        const center = new TMap.LatLng(39.98412, 116.307484);
        this.map = new TMap.Map('tmap', {
          center: center,
          zoom: 12,
          pitch: 0,
          rotation: 0,
        });
  
        // 添加控件
        // this.map.addControl(new TMap.Control.Zoom());
        // this.map.addControl(new TMap.Control.Scale());
  
        // 点击地图事件
        this.map.on('click', (evt) => {
          this.$message.success(`点击位置: ${evt.latLng.getLat()}, ${evt.latLng.getLng()}`);
          this.addMarker(evt.latLng);
        });
      },
      addMarker(position) {
        // 先清除所有标记
        this.clearMarkers();
  
        // 创建标记
        const marker = new TMap.MultiMarker({
          map: this.map,
          geometries: [
            {
              position: position,
              id: 'marker_' + Date.now(),
              content: '<div class="marker-icon"></div>',
            },
          ],
        });
  
        this.markers.push(marker);
      },
  
      clearMarkers() {
        this.markers.forEach((marker) => {
          marker.setMap(null);
        });
        this.markers = [];
      },
  
      back() {
        this.$router.back();
      },
      getParameter(type) {
        Parameterlist({
          type: type,
        }).then((res) => {
          switch (type) {
            case 1:
              // 项目分类
              this.projectTypeList = res.data;
              break;
            case 2:
              // 项目进度
              this.projectProgressList = res.data;
              break;
            default:
              break;
          }
        });
      },
    },
  };
  </script>
  
  <style scoped>
  .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .title > span {
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  .flex {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .footer {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 9;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 210px;
    border-top: 1px solid #e6e6e6;
  }
  .demo-ruleForm /deep/ .el-form-item {
    display: flex;
    align-items: center;
  }
  .demo-ruleForm /deep/ .el-form-item__content {
    width: 100%;
  }
  .demo-ruleForm /deep/ .el-form-item__label {
    flex-shrink: 0;
  }
  .marker-icon {
    width: 20px;
    height: 20px;
    background-color: #409eff;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
  .map {
    width: 100%;
    margin-top: 10px;
    position: relative;
  }
  .search_content {
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  .clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .amap-demo {
    height: 500px;
  }
  </style>
  